<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="head">
        <style type="text/css">
            .ui-galleria-panel-content table {
                margin: 0 auto;
            }
        </style>
    </ui:define>

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">Galleria - Content</h1>
        <div class="entry">
            <p>Galleria can also display custom content not just images.</p>

            <p:galleria id="contentGalleria" value="#{galleriaBean.players}" var="player" frameWidth="64" frameHeight="87"
                        panelWidth="300" panelHeight="200" transitionInterval="0" styleClass="ui-widget-content ui-corner-all">
                <p:graphicImage id="playerImage" value="/images/barca/#{player.photo}"/>
                <p:galleriaContent>
                    <h:panelGrid  columns="2" cellpadding="5">
                        <f:facet name="header">
                            <p:graphicImage value="/images/barca/#{player.photo}" />
                        </f:facet>

                        <h:outputText value="Name: " />
                        <h:outputText id="name" value="#{player.name}" style="font-weight:bold" />

                        <h:outputText value="Number " />
                        <h:outputText id="number" value="#{player.number}" style="font-weight:bold"/>

                        <h:outputText value="Position " />
                        <h:outputText id="position" value="#{player.position}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:galleriaContent>
            </p:galleria>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="galleriaContent.xhtml">
                    <pre name="code" class="xml">
&lt;p:galleria id="contentGalleria" value="\#{galleriaBean.players}"
            var="player" frameWidth="64" frameHeight="87"
            panelWidth="300" panelHeight="200" transitionInterval="0"
            styleClass="ui-widget-content ui-corner-all"&gt;

    &lt;p:graphicImage id="playerImage" value="/images/barca/\#{player.photo}"/&gt;
    &lt;p:galleriaContent&gt;
        &lt;h:panelGrid  columns="2" cellpadding="5"&gt;
            &lt;f:facet name="header"&gt;
                &lt;p:graphicImage value="/images/barca/\#{player.photo}" /&gt;
            &lt;/f:facet&gt;

            &lt;h:outputText value="Name: " /&gt;
            &lt;h:outputText id="name" value="\#{player.name}"/&gt;

            &lt;h:outputText value="Number " /&gt;
            &lt;h:outputText id="number" value="\#{player.number}"/&gt;

            &lt;h:outputText value="Position " /&gt;
            &lt;h:outputText id="position" value="\#{player.position}"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:galleriaContent&gt;

&lt;/p:galleria&gt;

                    </pre>
                </p:tab>

                <p:tab title="GalleriaBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import org.primefaces.examples.domain.Player;

public class GalleriaBean {

    private List&lt;Player&gt; players;

    @PostConstruct
    public void init() {
        players = new ArrayList&lt;Player&gt;();

        players.add(new Player("Messi", 10, "messi.jpg", "CF"));
        players.add(new Player("Iniesta", 8, "iniesta.jpg", "CM"));
        players.add(new Player("Villa", 7, "villa.jpg", "CF"));
        players.add(new Player("Xavi", 6, "xavi.jpg", "CM"));
        players.add(new Player("Puyol", 5, "puyol.jpg", "CB"));
    }

    public List&lt;Player&gt; getPlayers() {
        return players;
    }
}
                    </pre>
                </p:tab>
            </p:tabView>

        </div>
    </ui:define>
</ui:composition>